<template>
    <el-container>
        <div>
            课程评论列表
            <div id="sx">
                <el-button size="small" icon="el-icon-refresh" @click="shuaxin()">刷新</el-button>
            </div>
            <div id="fh">
                <el-button size="small" icon="el-icon-arrow-left" @click="fanhui">返回</el-button>
            </div>
        </div>
        <el-header style="background-color: #F6F7F9">
            <div id="er">
                <div id="zh">
                    用户账号：
                    <el-input type="text" v-model="inputVal" placeholder="用户账号" style="width: 180px;" @change="yhzh"></el-input>
                </div>
                <div id="nc">
                    用户昵称：
                    <el-input type="text" v-model="inputVals" placeholder="用户昵称" style="width: 180px;" @change="yhnc"></el-input>
                </div>
                <div id="zt">
                    状态：
                    <el-select v-model="state" placeholder="全部状态" @change="getSate()">
                        <el-option label="已通过" :value="1"></el-option>
                        <el-option label="待审核" :value="2"></el-option>
                        <el-option label="已拦截" :value="3"></el-option>
                    </el-select>
                </div>

            </div>
        </el-header>
        <el-main>
            <div class="ping">
                <el-table
                         :data="tableDatas"
                          border
                          :header-cell-style="{
        					background: '#F5F7FA',
        					color: 'black',
      					}"style="width: 100%">
                    <el-table-column prop="liCi"  label="历史评论次数"></el-table-column>
                    <el-table-column prop="liRen" label="历史评论人数"></el-table-column>
                    <el-table-column prop="jinCi" label="今日评论次数"></el-table-column>
                    <el-table-column prop="jinRen" label="今日评论人数"></el-table-column>
                </el-table>
            </div>
        </el-main>
        <el-main>
            <div>
                <!-- 商品表格 -->
                <el-table
                        :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
                        border
                        stripe
                        :header-cell-style="{
        					background: '#F5F7FA',
        					color: 'black',
      					}">
                    <el-table-column type="selection" width="55"></el-table-column>
                    <el-table-column prop="beforeUser[0].account" label="成员账号" ></el-table-column>
                    <el-table-column prop="beforeUser[0].nickname" label="昵称"></el-table-column>
                    <el-table-column prop="course[0].courseName" label="所有课程"></el-table-column>
                    <el-table-column prop="commentDate" label="发言时间"></el-table-column>
                    <el-table-column prop="content" label="发言内容"></el-table-column>
                    <el-table-column prop="state" label="状态">
                        <template slot-scope="scope">
                            <span v-if="scope.row.state == 1">已通过</span>
                            <span v-if="scope.row.state == 2">待审核</span>
                            <span v-if="scope.row.state == 3">已拦截</span>
                        </template>
                    </el-table-column>
                    <el-table-column fixed="right" label="操作" width="100">
                        <template slot-scope="scope">
                            <span v-if="scope.row.state == 1">
                                <el-button  @click="delComment(scope)" type="text" size="small">删除</el-button>
                                <el-button @click="lanJie(scope)" type="text" size="small">拦截</el-button>
                            </span>
                            <span v-if="scope.row.state == 2">
                                <el-button @click="tongGuo(scope)" type="text" size="small">通过</el-button>
                                <el-button @click="lanJie(scope)" type="text" size="small">拦截</el-button>
                            </span>
                            <span v-if="scope.row.state == 3">
                                <el-button @click="tongGuo(scope)" type="text" size="small">通过</el-button>
                                <el-button  @click="delComment(scope)" type="text" size="small">删除</el-button>
                            </span>
                        </template>
                    </el-table-column>
                </el-table>
                <!-- 分页器-->
                <div class="block" style="margin-top:15px;">
                    <el-pagination align='center' @size-change="handleSizeChange" @current-change="handleCurrentChange"
                                   :current-page="currentPage"
                                   :page-sizes="[2,4,8,10]"
                                   :page-size="pageSize"
                                   layout="total, sizes, prev, pager, next, jumper"
                                   :total="tableData.length">
                    </el-pagination>
                </div>
            </div>
        </el-main>
    </el-container>
</template>

<script>
    export default {
        name: "CommentList",
        data(){
            return{
                tableData:[],
                tableDatas:[{
                    liCi:0,
                    liRen:0,
                    jinCi:0,
                    jinRen:0
                }],
                inputVal:'',
                inputVals:'',
                state:'',
                currentPage: 1, // 当前页码
                total: 20, // 总条数
                pageSize: 10 ,// 每页的数据条数
            }
        },
        methods:{
            //课程评论
            getCourseComment(){
                this.$http.post('/courseComment/getCommentList')
                    .then(res => {
                        this.tableData = res.data;
                        console.log(res.data)
                    })
            },
            //用户账号查询
            yhzh(){
                let data = 'account=' + this.inputVal;
                console.log(this.inputVal);
                this.$http({
                    method: 'post',
                    url: '/courseComment/getCommentState',
                    data: data
                }).then(res => {
                    this.tableData = res.data;
                })
            },
            //用户昵称查询
            yhnc(){
                let data = 'nickname=' + this.inputVals;
                console.log(this.inputVals);
                this.$http({
                    method: 'post',
                    url: '/courseComment/getCommentState',
                    data: data
                }).then(res => {
                    this.tableData = res.data;
                })
            },
            //状态查询
            getSate(){
                let data = 'state=' + this.state;
                console.log(this.state);
                this.$http({
                    method: 'post',
                    url: '/courseComment/getCommentState',
                    data: data
                }).then(res => {
                    this.tableData = res.data;
                })
            },
            //刷新
            shuaxin(){
                this.$router.go(0);
            },
            //返回
            fanhui(){
                if(window.history.length <= 1){
                    this.$router.push({path:"/system/storageManagement"});
                    return false;
                }else {
                    this.$router.go(-1);
                }
            },
            //每页条数改变时触发 选择一页显示多少行
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.currentPage = 1;
                this.pageSize = val;
            },
            //当前页改变时触发 跳转其他页
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.currentPage = val;
            },
            //历史评论次数
            getLiFrequency(){
                this.$http.post('/courseComment/getLiFrequency')
                    .then(res => {
                        this.tableDatas[0].liCi = res.data.c;
                        console.log(res.data.c)
                    })
            },
            //历史评论次数
            getLiPeople(){
                this.$http.post('/courseComment/getLiPeople')
                    .then(res => {
                        this.tableDatas[0].liRen = res.data.c;
                        console.log(res.data.c)
                    })
            },
            //今日评论次数
            getJinFrequency(){
                this.$http.post('/courseComment/getJinFrequency')
                    .then(res => {
                        this.tableDatas[0].jinCi = res.data.c;
                        console.log(res.data.c)
                    })
            },
            //今日评论次数
            getJinPeople(){
                this.$http.post('/courseComment/getJinPeople')
                    .then(res => {
                        this.tableDatas[0].jinRen = res.data.c;
                        console.log(res.data.c)
                    })
            },
            //通过
            tongGuo(scope){
                console.log(scope.row.id);
                this.$http.post('/courseComment/getTongGuo?id=' + scope.row.id + '&state=' + scope.row.state)
                    .then(res => {
                        this.getCourseComment(); //删除数据后重新获取数据
                    })
            },
            //拦截
            lanJie(scope){
                console.log(scope.row.id);
                this.$http.post('/courseComment/getLanJie?id=' + scope.row.id + '&state=' + scope.row.state)
                    .then(res => {
                        this.getCourseComment(); //删除数据后重新获取数据
                    })
            },
            //删除
            delComment(scope){
                console.log(scope.row.id);
                this.$confirm("此操作将永久删除此条评论, 是否继续?", "警告", {
                    confirmButtonText: "继续",
                    cancelButtonText: "取消",
                    type: "warning"
                })
                .then(() => {
                    let id = scope.row.id;
                    const data = {id};
                    this.$http.post("/courseComment/delComment?id="+scope.row.id, data)
                        .then(response => {
                            console.log(response);
                            this.getCourseComment(); //删除数据后重新获取数据
                        })
                        .catch(() => {
                            this.$message({
                                type: "success",
                                message: "删除成功"
                            })
                        })
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消删除"
                    });
                });
            },
        },
        mounted() {
            this.getCourseComment();
            this.getLiFrequency();
            this.getLiPeople();
            this.getJinFrequency();
            this.getJinPeople();
        },
    }
</script>

<style scoped>
    .el-container{
        width: 1490px;
    }
    #sx{
        float: right;
        margin-right: 110px;
    }
    #fh{
        float: right;
        margin-right: -180px;
    }
    .si{
        height: 40px;
        line-height: 40px;
        background-color: #F3F3F3;
    }
    .ping{
        height: 100px;
    }
    #nc{
        float: left;
        margin-left: 480px;
        margin-top: -60px;
    }
    #zt{
        float: left;
        margin-left: 1020px;
        margin-top: -60px;
    }

</style>